<template>
	<view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
		
		
		<!-- 导航栏内容 -->
		<view class="navbar-content" @tap="onTitleClick">
			<view class="navbar-left">
				<image v-if="showBack" class="back-icon" src="https://img.icons8.com/ios/50/back.png" mode="aspectFit" @tap="goBack"></image>
				<slot name="left"></slot>
			</view>
			
			<view class="navbar-center" >
				<text v-if="title" class="navbar-title">{{title}}</text>
				<view v-else class="custom-title">
					<!-- <text class="app-name">懒人</text> -->
																				<image class="sun-icon2" :src="appname" mode="aspectFit"></image>

															<image class="sun-icon" :src="logo" mode="aspectFit"></image>

					<!-- <text class="app-name">资源</text> -->

				</view>
				<slot name="center"></slot>
			</view>
			
			<view class="navbar-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
import logo from '@/static/logo2.png';
import appname from '@/static/appname.png'

export default {
	name: 'CustomNavbar',
	props: {
		title: {
			type: String,
			default: ''
		},
		showBack: {
			type: Boolean,
			default: false
		},
		backgroundColor: {
			type: String,
			default: '#ffffff'
		},
		textColor: {
			type: String,
			default: '#333333'
		}
	},
	data() {
		return {
			logo,
			appname,
			statusBarHeight: 0,
			navbarHeight: 44
		}
	},
	mounted() {
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 44;
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		 onTitleClick() {
            this.$emit('titleClick');
        }
	}
}
</script>

<style scoped>
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #4fa6ff;
	/* box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); */
}

.status-bar {
	width: 100%;
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
}

.navbar-left,
.navbar-right {
	display: flex;
	align-items: center;
	min-width: 120rpx;
}

.navbar-right {
	justify-content: flex-end;
}

.navbar-center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.back-icon {
	width: 40rpx;
	height: 40rpx;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.custom-title {
	display: flex;
	align-items: center;
}

.app-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.sun-icon {
	width: 64rpx;
	height: 64rpx;
	margin: 0 8rpx;
}
.sun-icon2 {
	width: 128rpx;
	height: 64rpx;
	margin: 0 8rpx;
}
</style>